<template>
  <div>
    <div class="header">
      <h1>&lt;</h1>
      <input type="text" placeholder="请输入商家名，品类或商圈" />
    </div>
    <div class="nav">
      <ul class="top">
        <li>
          洗浴/汗蒸
          <img src="img/xiabiao.jpg" />
        </li>
        <li>
          附近
          <img src="img/xiabiao.jpg" />
        </li>
        <li>
          智能排序
          <img src="img/xiabiao.jpg" />
        </li>
        <li>
          筛选
          <img src="img/xiabiao.jpg" />
        </li>
      </ul>

      <div class="Bottom">
        <ul class="bottom">
          <li>
            <img src="img/xiyu.jpg" />
            <i>玩乐卡</i>
          </li>
          <li>洗浴中心</li>
          <li>汗蒸馆</li>
          <li>浴室澡堂</li>
        </ul>
      </div>
    </div>
    <div class="main">
      <ul>
        <li class="main-1" v-for="(v,i) in  this.$store.state.bath.arr" :key="i">
          <img :src="v.img1" />
          <div class="right">
            <h1>{{v.name}}<img :src="v.img2" /></h1>
            <div class="right-1">
              <img :src="v.img3" />
              <span>{{v.score}}</span>
              <p>{{v.num}}</p>
              
              <i>{{v.km}}</i>
            </div>
            <div class="right-2">
              <span>{{v.add}}</span>&nbsp;|
              <span>{{v.pedre}}</span>
              
            </div>
            <p class="right-3">
              <span class="span2">{{v.tuangou}}</span>
              <span>{{v.car}}</span>
              <span>{{v.muyu}}</span>
            </p>
            <p class="right-4">
              <span>团</span>
             {{v.xiangm}}
              <i> {{v.money}}</i>
            </p>
            <p class="right-5">
              <span>团</span>
             {{v.ximu}}
              <i> {{v.yishou}}</i>
            </p>
            
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  created(){
    // 因为异步请求在vuex的actions中所以我需要调用actions
    this.$store.dispatch("bathlist",{url:"/bath"})
   
  
  },

};
</script>

<style scoped>
.header {
  width: 100%;
  height: 0.43rem;
  display: flex;
  justify-content: start;
  position: sticky;
  top: 0;
  background-color: #ffffff;
}
.header > h1 {
  font-size: 0.2rem;
  margin-top: 0.08rem;
  margin-left: 0.15rem;
}
.header > input {
  width: 2.44rem;
  height: 0.28rem;
  background-color: #f3f4ef;
  border-radius: 0.3rem;
  border: #f3f4ef;
  text-align: center;
  margin-top: 0.1rem;
  margin-left: 0.28rem;
}
.nav {
  position: sticky;
  top: 0.43rem;
}
.top {
  width: 100%;
  height: 0.25rem;
  display: flex;
  justify-content: space-around;
  background-color: #ffffff;
}
.top > li {
  width: 25%;
  height: 0.16rem;
  text-align: center;
  font-size: 0.12rem;
  line-height: 0.16rem;
  border-right: 2px #e8e8e8 solid;
}
.top > li > img {
  height: 0.06rem;
  width: 0.06rem;
}
.bottom {
  width: 100%;
  height: 0.48rem;
  display: flex;
  justify-content: start;
  line-height: 0.48rem;
}
.bottom > li {
  height: 0.28rem;
  text-align: center;
  padding: 0 0.1rem;
  border: 1px #e8ecef solid;
  line-height: 0.28rem;
  margin-right: 0.07rem;
  border-radius: 0.2rem;
  margin-top: 0.1rem;
  position: relative;
}

.bottom > li > img {
  height: 0.18rem;
  position: absolute;
  top: 0.05rem;
}
.bottom > li > i {
  padding-left: 0.28rem;
}
.Bottom {
  overflow-x: auto;
  background-color: #ffffff;
}
.main {
  width: 100%;
}
.main-1 {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 0.15rem;
}
.main-1 > img {
  width: 0.72rem;
  height: 0.72rem;
}
.right > h1 {
  font-size: 0.15rem;
}
.right > h1 > img {
  width: 0.11rem;
  height: 0.14rem;
  margin-left: 0.2rem;
}
.right-1 {
  height: 0.25rem;
  display: flex;
  justify-content: start;
  line-height: 0.25rem;
}
.right-1 > img {
  width: 0.8rem;
  height: 0.17rem;
  margin-top: 0.07rem;
}
.right-1 > span {
  font-size: 0.1rem;
  color: #fa9644;
  font-weight: 700;
}
.right-1 > p {
  font-size: 0.1rem;
  margin-left: 0.14rem;
}
.right-1 > .img {
  width: 0.33rem;
  height: 0.14rem;
  margin-right: 0.3rem;
  margin-left: 0.1rem;
}
.right-1 > i {
  font-size: 0.1rem;
  margin-left: 0.8rem;
}
.right-2 {
  height: 0.25rem;
  line-height: 0.25rem;
}

.right-3 {
  height: 0.08rem;
}
.right-3 > span {
  margin-right: 0.075rem;
  border: 1px solid;
  padding: 0 0.02rem;
  font-size: 0.1rem;
}
.right-3 > .span2 {
  width: 2.4rem;
  height: 1.4rem;
  border: 1px #fa922f solid;
  font-size: 0.05rem;
  color: #efa832;
}
.right-4 {
  height: 0.25rem;
  margin-top: 0.1rem;
  line-height: 0.25rem;
}
.right-4 > span {
  background-color: #fa922f;
  color: white;
}
.right-4 > i {
  color: #aeafaa;
  float: right;
}
.right-5 {
  height: 0.25rem;
  line-height: 0.25rem;
}
.right-5 > span {
  background-color: #fa922f;
  color: white;
}
.right-5 > i {
  color: #aeafaa;
  float: right;
}

</style>